<template>
    <div style="height:100%;width:100%;">
        <bar class="bar" @on-back="$router.back()" title="补油"></bar>
        <group>
            <cell-box>
                <span>当前油量</span><span style="margin-left:10px">{{value}}L</span>
            </cell-box>
            <mu-input label="增加油量" type="number" label-class="my-name" v-model="number" class="my-edit-name"></mu-input>
            <cell-box>
                <span>增加后油量</span><span style="margin-left:10px;color:#44b549">{{countVal}}L</span>
            </cell-box>
        </group>
        <div class="my-input">
            <x-button class="login-submit" @click.native="onSave">保存</x-button>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'

    import {
        lang
    } from 'muka'
    import {
        Bar,
        MInput
    } from 'muka-ui'
    import {
        Group,
        XButton,
        CellBox
    } from 'vux'

    export default {
        name: 'editName',
        components: {
            Bar,
            'mu-input': MInput,
            Group,
            XButton,
            CellBox
        },
        created: function () {
            this.item = this.tankerList[this.$route.params.index]
            this.number = 0
            this.value = this.item.remainFuel
            this.countVal = this.item.remainFuel
        },
        computed: mapState([
            VUEX_NAME.tankerList
        ]),
        watch: {
            number: function (newVal) {
                this.countVal = (Number(this.value) + Number(newVal)).toFixed(2)
            }
        },
        data: function () {
            return {
                item: null,
                value: '',
                countVal: 0,
                number: 0
            }
        },
        methods: {
            ...mapMutations([
                VUEX_NAME.uTanker // 映射 this.increment() 为 this.$store.commit('increment')
            ]),
            onSave: function () {
                if (!this.number) {
                    this.$vux.toast.show({
                        text: '请输入加油量',
                        type: 'text',
                        position: 'middle'
                    })
                    return
                }
                this.$ajax(
                    'mch/addOil',
                    {
                        oil: this.number,
                        tankerId: this.item.tankerId
                    },
                    (content) => {
                        this.item.remainFuel = content.currentOil
                        this.$router.back()
                    }, true)
            }
        }
    }

</script>
